{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
{/block}

{block name="body"}
<div class="container">
  <ol class="breadcrumb">
      <li><a href="{:url('index/index')}">演示首页</a></li>
      <li>表单控件</li>
  </ol>
<section class="demo-section">
<div id="pageContent">



<article><p>为 <code>&lt;input&gt;</code>、<code>&lt;textarea&gt;</code>、<code>&lt;select&gt;</code> 添加 <code>form-control</code> 类即可得到统一外观的表单控件。</p><p>所有受支持的表单控件包括：</p><ul>
<li><code>&lt;select class="form-control"&gt;</code></li>
<li><code>&lt;textarea class="form-control"&gt;</code></li>
<li><code>&lt;input type="text" class="form-control"&gt;</code></li>
<li><code>&lt;input type="password" class="form-control"&gt;</code></li>
<li><code>&lt;input type="datetime" class="form-control"&gt;</code></li>
<li><code>&lt;input type="datetime-local" class="form-control"&gt;</code></li>
<li><code>&lt;input type="date" class="form-control"&gt;</code></li>
<li><code>&lt;input type="month" class="form-control"&gt;</code></li>
<li><code>&lt;input type="time" class="form-control"&gt;</code></li>
<li><code>&lt;input type="week" class="form-control"&gt;</code></li>
<li><code>&lt;input type="number" class="form-control"&gt;</code></li>
<li><code>&lt;input type="email" class="form-control"&gt;</code></li>
<li><code>&lt;input type="url" class="form-control"&gt;</code></li>
<li><code>&lt;input type="search" class="form-control"&gt;</code></li>
<li><code>&lt;input type="tel" class="form-control"&gt;</code></li>
<li><code>&lt;input type="color" class="form-control"&gt;</code></li>
</ul></article>


<section><header><h3>基本类型</h3></header><article><div class="table-responsive"><table class="table">
  <tbody>
    <tr>
      <th width="200px">实例</th>
      <th>代码</th>
    </tr>
    <tr>
      <td><input type="text" class="form-control" placeholder="用户名"></td>
      <td><pre class="prettyprint prettyprinted" style=""><code><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"</span><em><span class="atv">form-control</span></em><span class="atv">"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"用户名"</span><span class="tag">&gt;</span></code></pre></td>
    </tr>
    <tr>
      <td><input type="email" class="form-control" placeholder="电子邮件"></td>
      <td>
        <pre class="prettyprint prettyprinted" style=""><code><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"email"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"</span><em><span class="atv">form-control</span></em><span class="atv">"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"电子邮件"</span><span class="tag">&gt;</span></code></pre>
      </td>
    </tr>
    <tr>
      <td>
      <textarea class="form-control" rows="3" placeholder="可以输入多行文本"></textarea></td>
      <td>
        <pre class="prettyprint prettyprinted" style=""><code><span class="tag">&lt;textarea</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"</span><em><span class="atv">form-control</span></em><span class="atv">"</span><span class="pln"> </span><span class="atn">rows</span><span class="pun">=</span><span class="atv">"3"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"可以输入多行文本"</span><span class="tag">&gt;&lt;/textarea&gt;</span></code></pre>
      </td>
    </tr>
    <tr>
      <td><input type="file" value="" class="form-control"></td>
      <td><pre class="prettyprint prettyprinted" style=""><code><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"file"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"</span><em><span class="atv">form-control</span></em><span class="atv">"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span></code></pre></td>
    </tr>
    <tr>
      <td>
        <select class="form-control">
          <option value="">请选择一种水果</option>
          <option value="apple">苹果</option>
          <option value="banana">香蕉</option>
          <option value="orange">桔子</option>
        </select>
      </td>
      <td><pre class="prettyprint prettyprinted" style=""><code><span class="tag">&lt;select</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"</span><em><span class="atv">form-control</span></em><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">请选择一种水果</span><span class="tag">&lt;/option&gt;</span><span class="pln">
  </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"apple"</span><span class="tag">&gt;</span><span class="pln">苹果</span><span class="tag">&lt;/option&gt;</span><span class="pln">
  </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"banana"</span><span class="tag">&gt;</span><span class="pln">香蕉</span><span class="tag">&lt;/option&gt;</span><span class="pln">
  </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"orange"</span><span class="tag">&gt;</span><span class="pln">桔子</span><span class="tag">&lt;/option&gt;</span><span class="pln">
  ...
</span><span class="tag">&lt;/select&gt;</span></code></pre></td>
    </tr>
    <tr>
      <td>
        <select class="form-control" multiple="">
          <option value="">请选择所有爱吃的水果</option>
          <option value="apple">苹果</option>
          <option value="banana">香蕉</option>
          <option value="orange">桔子</option>
          <option value="orange">西瓜</option>
        </select>
      </td>
      <td><pre class="prettyprint prettyprinted" style=""><code><span class="tag">&lt;select</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"</span><em><span class="atv">form-control</span></em><span class="atv">"</span><span class="pln"> </span><span class="atn">multiple</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">请选择所有爱吃的水果</span><span class="tag">&lt;/option&gt;</span><span class="pln">
  </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"apple"</span><span class="tag">&gt;</span><span class="pln">苹果</span><span class="tag">&lt;/option&gt;</span><span class="pln">
  </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"banana"</span><span class="tag">&gt;</span><span class="pln">香蕉</span><span class="tag">&lt;/option&gt;</span><span class="pln">
  </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"orange"</span><span class="tag">&gt;</span><span class="pln">桔子</span><span class="tag">&lt;/option&gt;</span><span class="pln">
  </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"orange"</span><span class="tag">&gt;</span><span class="pln">西瓜</span><span class="tag">&lt;/option&gt;</span><span class="pln">
</span><span class="tag">&lt;/select&gt;</span></code></pre></td>
    </tr>
  </tbody>
</table></div></article></section>


<section><header><h3>文本框状态</h3></header><article><div class="table-responsive"><table class="table">
  <tbody>
    <tr>
      <th width="200px">实例</th>
      <th>代码</th>
    </tr>
    <tr>
      <td><input class="form-control" type="text" placeholder="此文本框被禁用" disabled="">
      <br></td>
      <td><pre class="prettyprint prettyprinted" style=""><code><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"此文本框被禁用"</span><span class="pln"> </span><em><span class="atn">disabled</span></em><span class="tag">&gt;</span></code></pre></td>
    </tr>
    <tr>
      <td><input class="form-control" type="text" placeholder="此文本框只读" readonly="">
      <br></td>
      <td><pre class="prettyprint prettyprinted" style=""><code><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"此文本框只读"</span><span class="pln"> </span><em><span class="atn">readonly</span></em><span class="tag">&gt;</span></code></pre></td>
    </tr>
    <tr>
      <td><input class="form-control" autofocus="" type="text" placeholder="请激活此文本框">
      <br></td>
      <td><pre class="prettyprint prettyprinted" style=""><code><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control form-focus"</span><span class="pln"> </span><span class="atn">autofocus</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"请激活此文本框"</span><span class="tag">&gt;</span></code></pre></td>
    </tr>
    <tr>
      <td>
        <div class="has-warning">
          <input class="form-control" type="text" placeholder="好像不对。">
        </div>
        <br>
      </td>
      <td>
        <pre class="prettyprint prettyprinted" style=""><code><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"has-warning"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"</span><em><span class="atv">form-control</span></em><span class="atv">"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"Warning..."</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre>
      </td>
    </tr>
    <tr>
      <td>
        <div class="has-error">
          <input class="form-control" type="text" placeholder="错的。">
        </div>
        <br>
      </td>
      <td>
        <pre class="prettyprint prettyprinted" style=""><code><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"has-error"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"</span><em><span class="atv">form-control</span></em><span class="atv">"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"Warning..."</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre>
      </td>
    </tr>
    <tr>
      <td>
        <div class="has-success">
          <input class="form-control" type="text" placeholder="对的！">
        </div>
        <br>
      </td>
      <td>
        <pre class="prettyprint prettyprinted" style=""><code><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"has-success"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"</span><em><span class="atv">form-control</span></em><span class="atv">"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"Warning..."</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre>
      </td>
    </tr>
  </tbody>
</table></div></article></section>


<section><header><h3>尺寸</h3></header><article><div class="table-responsive"><table class="table">
  <tbody>
    <tr>
      <th width="200px">实例</th>
      <th>代码</th>
    </tr>
    <tr>
      <td><input class="form-control input-lg" type="text" placeholder="较大尺寸的文本框"></td>
      <td><pre class="prettyprint prettyprinted" style=""><code><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control </span><em><span class="atv">input-lg</span></em><span class="atv">"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"较大尺寸的文本框"</span><span class="tag">&gt;</span></code></pre></td>
    </tr>
    <tr>
      <td><input class="form-control" type="text" placeholder="默认尺寸的文本框"></td>
      <td><pre class="prettyprint prettyprinted" style=""><code><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"</span><em><span class="atv">form-control</span></em><span class="atv">"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"默认尺寸的文本框"</span><span class="tag">&gt;</span></code></pre></td>
    </tr>
    <tr>
      <td><input class="form-control input-sm" type="text" placeholder="小尺寸的文本框"></td>
      <td><pre class="prettyprint prettyprinted" style=""><code><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control </span><em><span class="atv">input-sm</span></em><span class="atv">"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"小尺寸的文本框"</span><span class="tag">&gt;</span></code></pre></td>
    </tr>
  </tbody>
</table></div></article></section>




<style>
#pageContent table td > pre {margin-bottom: 0}
</style><section><header><h3>使用栅格</h3></header><article><p>使用栅格来使用水平布局。</p><div class="example">
  <div class="row">
    <div class="col-xs-3">
      <input type="text" class="form-control" placeholder=".col-xs-2">
    </div>
    <div class="col-xs-4">
      <input type="text" class="form-control" placeholder=".col-xs-3">
    </div>
    <div class="col-xs-5">
      <input type="text" class="form-control" placeholder=".col-xs-4">
    </div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-xs-3"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">".col-xs-2"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-xs-4"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">".col-xs-3"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-xs-5"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">".col-xs-4"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section></div>
</section>
{/block}